/**
 * @fileOverview <p>Contains class and interfaces needed for 
 * {@link eui.MenuBar}.
 * @author embrace.toolkit
 * @version $Id: menuBar.js 106 2009-10-01 08:24:37Z embrace.toolkit $
 */
/**
 * @class Prototype UI Extension for interactive menu bar.
 * @public
 * @author embrace.toolkit
 */
eui.MenuBar = Class.create({
	/** @lends eui.MenuBar */
	/**
	 * Reference to the DOM Element.
	 * @private
	 * @type Element
	 */
	element: false,
	/**
	 * Call on creating instance of MenuBar.
	 * @param Element element The referenced Element in the DOM.
	 * @public
	 */
	initialize: function(element) {
		this.element = element;
		this.setup();
	},
	/**
	 * Setting up the UI Element.
	 * @private
	 */
	setup: function() {
		$(this.element).select(".menuItem").each(function(menuItem) {
			menuItem.observe("mouseover", this.over);
			menuItem.observe("mouseout", this.out);
			menuItem.observe("click", this.click.bind(this));
		}.bind(this));
		
	},
	/**
	 * mouse over handler
	 * @param Event overEvent the notified event.
	 * @event mouseover
	 * @private
	 */
	over: function(overEvent) {
		this.addClassName("over");
	},
	/**
	 * mouse out handler
	 * @param Event outEvent the notified Event.
	 * @event mouseout
	 * @private
	 */
	out: function(outEvent) {
		this.removeClassName("over");
	},
	/**
	 * click handler
	 * @param Event clickEvent the notified event
	 * @event click
	 * @private
	 */
	click: function(clickEvent) {
		$$(".menuItem").invoke("removeClassName", "active");
		var el = clickEvent.findElement();
		el.addClassName("active");
		$(this.element).fire("menu:clicked", { show: el.readAttribute("menuItem")});
	}
});